<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行学天下-首页</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div id="app">
    <!-- 头部 -->
    <div class="header">
      <div class="headLeft">
        <div class="logo">
          行学天下
        </div>
        <div class="title">
          行学天下
        </div>
      </div>
      <div class="headRight">
        <div class="callMe">
          <a href="#">
            <img src="image/callMe.png" alt="图片丢失了">
            致电我们
          </a>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="lunBoTu">
      <div class="lunBoTuImg">
        <ul>
          <li class="item" style="display: block;">
            <img src="image/picture1.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture2.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture3.jpg" alt="图片丢失">
          </li>
        </ul>
      </div>
      <div class="lnBtn">
        <div class="lastBtn">
          <img src="image/last.png" alt="图片丢失">
        </div>
        <div class="nextBtn">
          <img src="image/next.png" alt="图片丢失">
        </div>
      </div>
      <div class="smallBtn">
        <ul>
          <li class="btn active"></li>
          <li class="btn"></li>
          <li class="btn"></li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
</script>
<script>
  var index = 0;
  var timer;
  // 通过定时器切换图片
  function myTimer() {
    timer = setInterval(
      function () {
        index++;
        if (index > 2) {
          index = 0
        }
        $('.item').eq(index).show().siblings().hide();
        // 改变小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
      }, 3000
    )
  }
  this.myTimer();
  var that = this;
  // 通过左右键切换图片
  $('.nextBtn').click(function () {
    index++;
    if (index > 2) {
      index = 0;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  $('.lastBtn').click(function () {
    index--;
    if (index < 0) {
      index = 2;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  // 点击小圆点切换图片
  $('.btn').click(function () {
    // 获取用户点击的列表元素下标
    index = $(this).index();
    // 切换图片
    $('.item').eq(index).show().siblings().hide();
    // 给小圆点添加样式
    $(this).addClass('active').siblings().removeClass('active')
    // 重置定时器
    clearInterval(timer);
    that.myTimer();
  })
</script>

</html>